<!DOCTYPE html>
<script src="../../resources/testharness.js"></script>
<script src="../../resources/testharnessreport.js"></script>
<style>
#container {
  font: 10px/1;
}
</style>
<div id=log></div>
<div id=container>
  <div>
    <div>before</div>
    <div><span></span></div>
    <div>after</div>
  </div>
  <div>
    <div>before</div>
    <div><span style="margin-bottom:1px"></span></div>
    <div>after</div>
  </div>
  <div>
    <div>before</div>
    <div><span style="border-bottom:1px solid"></span></div>
    <div>after</div>
  </div>
  <div>
    <div>before</div>
    <div><span style="padding-bottom:1px"></span></div>
    <div>after</div>
  </div>
  <div data-has-height=true>
    <div>before</div>
    <div><span style="margin-left:1px"></span></div>
    <div>after</div>
  </div>
  <div data-has-height=true>
    <div>before</div>
    <div><span style="border-left:1px solid"></span></div>
    <div>after</div>
  </div>
  <div data-has-height=true>
    <div>before</div>
    <div><span style="padding-left:1px"></span></div>
    <div>after</div>
  </div>
  <div data-has-height=true>
    <div>before</div>
    <div><span style="margin-right:1px"></span></div>
    <div>after</div>
  </div>
  <div data-has-height=true>
    <div>before</div>
    <div><span style="border-right:1px solid"></span></div>
    <div>after</div>
  </div>
  <div data-has-height=true>
    <div>before</div>
    <div><span style="padding-right:1px"></span></div>
    <div>after</div>
  </div>
  <div data-has-height=true>
    <div>before</div>
    <div><span style="margin-left:-1px"></span></div>
    <div>after</div>
  </div>
  <div data-has-height=true>
    <div>before</div>
    <div><span style="margin-right:-1px"></span></div>
    <div>after</div>
  </div>
  <div data-has-height=true>
    <div>before</div>
    <div><span style="margin-left:1px;margin-right:-1px"></span></div>
    <div>after</div>
  </div>
  <div data-has-height=true>
    <div>before</div>
    <div><span style="margin-left:-1px;border-left:1px solid"></span></div>
    <div>after</div>
  </div>
  <div data-has-height=true>
    <div>before</div>
    <div><span style="margin-left:-1px;padding-left:1px"></span></div>
    <div>after</div>
  </div>
  <div data-has-height=true>
    <div>before</div>
    <div><span style="margin-right:-1px;border-right:1px solid"></span></div>
    <div>after</div>
  </div>
  <div data-has-height=true>
    <div>before</div>
    <div><span style="margin-right:-1px;padding-right:1px"></span></div>
    <div>after</div>
  </div>
  <div data-has-height=true>
    <div>before</div>
    <div><span style="margin-right:1px"></span><span style="margin-left:-1px"></span></div>
    <div>after</div>
  </div>
</div>
<script>
let tests = container.children;
for (let i = 0; i < tests.length; i++) {
  let block = tests[i];
  let target = block.children[1];
  let name = (block.dataset.hasHeight ? "Has height" : "Zero height") +
    " when " + target.innerHTML;
  test(() => {
    let has_height = target.offsetHeight > 0;
    assert_equals(has_height, !!block.dataset.hasHeight);
  }, name);
}
</script>
